<template>
    <div class="svg-content" :id="id">
        <svg width="0" height="0">
            <defs>
                <linearGradient x1="0" y1="0" x2="-1" y2="1" :id="id+'_gradientRing'">
                    <stop offset="0%" style="stop-color:#1372FF;"></stop>
                    <stop offset="50%" style="stop-color:#0045CA;"></stop>
                </linearGradient>
            </defs>
        </svg>
    </div>
</template>
<script>
    import {d3, svgInit} from "./svgs";

    export default {
        props: {
            id: String,
            data: Object
        },
        data() {
            return {
                width: 85,
                height: 85,
                offsetStartAngle: 0,
                mask: false,
                lineWidth: 15, // 进度条宽
                offset: 3,
                diameter1: 80, //
                diameter2: 50, //
                innerRadius: 27, // 圆形进度条中心线的半径
                padding: 6,//
                circleBackground: "rgba(0,123,255,0.2)",
                stroke: "#00FFF3",
                titleFontSize: 28,
                nameFontSize: 14
            };
        },
        mounted() {
        },
        methods: {
            start() {
                let dom = document.querySelector("#svg_" + this.id);
                if (dom) {
                    d3.select("#svg_" + this.id).remove();
                }
                    svgInit(this.drawSvg, this.id, [this.width, this.height, this.diameter1, this.diameter2, this.titleFontSize, this.nameFontSize, this.offset]);
            },
            drawSvg(svg, id, width, height, diameter1, diameter2, titleFontSize, nameFontSize, offset) {
                let me = this;

                let complete = Math.floor((me.data.Complete / me.data.conut || 0) * 100);
                let noComplete = 100 - complete;
                const oriData = [{x: "noComplete", y: noComplete}, {x: "complete", y: complete}];

                svg.attr("width", width)
                    .attr("height", height);

                //绘制中间文字
                let g = svg.append("g")
                    .attr("transform", `translate( ${width / 2}, ${height / 2} )`);
                let text0 = g.append("text")
                    .text(oriData[1].y)
                    .attr("style", `font-size:${titleFontSize}px;font-family:BebasNeue;fill:white;text-anchor: middle;dominant-baseline: middle`)
                    .attr("transform", `translate(-${offset * 1.5},0)`);
                let text1 = g.append("text")
                    .text("%")
                    .attr("style", `font-size:${nameFontSize}px;font-family:PingFang;fill:white;text-anchor: middle;dominant-baseline: middle,font-weight:400`)
                    .attr("transform", `translate(${offset * 6},${offset * 4})`);

                //生成饼图数据
                let arc = d3.arc()
                // .innerRadius(diameter2 / 2)
                // .outerRadius(radius)
                    .cornerRadius(0);
                let drawData = d3
                    .pie()
                    .value(function (d) {
                        return d.y;
                    })
                    .sort(null)
                    .sortValues(null)
                    .startAngle(0)
                    .endAngle(Math.PI * 2)
                    .padAngle(0)(oriData);

                //生成色值序列
                let colorScale = d3
                    .scaleOrdinal()
                    .domain(d3.range(0, oriData.length))
                    .range(["#D0E3FF", "#BED8FF", "#9BC3FF", "#75ACFF", "#4A93FF", "#2E82FF", "#1372FF", "#1765FC", "#0B59F1", "#054DD9", "#0046CD", "#0043C4"]);

                let circle = g.append("g")

                    .selectAll("path")
                    .data(drawData)
                    .enter()
                    .append("path")
                    .attr("style", "cursor: pointer")
                    .attr("fill", function (d, i) {
                        if (i === 1) {
                            return `url(#${id}_gradientRing`;
                        }
                        else {
                            return "rgb(19, 114, 255,0.3)";
                        }
                    })
                    .attr("d", function (d, i) {
                        if (i === 0) {
                            d.outerRadius = diameter1 / 2 - offset;
                            d.innerRadius = diameter2 / 2 + offset;
                            me.offsetStartAngle = d.startAngle;
                        }
                        else {
                            d.outerRadius = diameter1 / 2;
                            d.innerRadius = diameter2 / 2;
                        }
                        return arc(d);
                    });


                // 初始动画效果
                circle.transition()
                    .duration(2000)
                    .attrTween("d", function (d) {
                        //初始加载时的过渡效果
                        let fn = d3.interpolate({
                            endAngle: d.startAngle
                        }, d);
                        return function (t) {
                            return arc(fn(t));
                        };
                    });

            }
        }
    };
</script>
<style scoped>

</style>
